import React, { useRef, useState } from 'react';
import { Input, Button, Modal } from "antd"
import { FileService } from '@zny/form';
import { request } from '@zny/utils';
import Mask from './Mask'
type methods = 'post' | 'get' | 'POST' | 'GET'

interface IProp {
    onFinish: (data: any) => void,
    params: {
        [propName: string]: any
    },
    url: string,
    urlMethod?: methods,
    style?: React.CSSProperties,
    zindex?: number
}

const UploadExcel: React.FC<IProp> = (props) => {
    let { url, urlMethod, params, style, ...restProps } = props

    const [maskVisible, setMaskVisible] = useState<boolean>(false)
    const [fileVal, setfileVal] = useState(null)
    const importRef: React.RefObject<any> = useRef(null);

    const clickImportButton = () => {
        importRef.current.input.click();
    };

    const fetchExcelData = (id: string, name: string) => {
        console.log('name:', name)
        if (urlMethod == null) urlMethod = 'get'
        if (urlMethod === 'post' || urlMethod === 'POST') {
            return request(url, {
                method: 'post',
                autoTips: false,
                data: { fileId: id, fileName:name, ...params },
                // data: { fileId: id, ...params },
            });
        } else if (urlMethod === 'get' || urlMethod === 'GET') {
            return request(url, {
                method: 'get',
                autoTips: false,
                params: { fileId: id, fileName:name, ...params },
                // params: { fileId: id, ...params },
            });
        }

    }

    const importExcel = async (e: React.ChangeEvent<HTMLInputElement>) => {
        console.log(e.target.files)
        if (e.target.files) {

            try {
                let res = await FileService.UploadFiles(e.target.files);

                console.log('res:',res)
                // console.log('res:',JSON.stringify(res))

                // let res = [{
              //   'result': true,
              //   'success': true,
              //   'message': '20200924110746117040118576268132',
              //   'fullFilePath': 'http://csfwq.msdi.cn:7000/?20200924110746117040118576268132',
              //   'fileMD5': '880e827214f146ca031b36cce6d83fdb',
              //   'size': 83078,
              //   'type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
              //   'name': '1026.xlsx',
              // }];

                let { success, message, name } = res[0]
                // let { success, message } = res[0]
                if (success) {
                    let fileIds = message
                    setMaskVisible(true)
                    let data = await fetchExcelData(fileIds, unescape(name))
                    // let data = await fetchExcelData(fileIds)
                    if (props.onFinish && typeof props.onFinish === 'function') {
                        props.onFinish(data)
                    }
                    setMaskVisible(false)
                    setfileVal(null)
                }
            } catch (error) {
                setMaskVisible(false)
                setfileVal(null)
                Modal.info({
                    title: '提示',
                    content: error.message ? error.message : '文件上传失败',
                    okText: '好的',
                });
                console.error(error)
            }

        }
    };

    return (
        <>
            <Mask visible={maskVisible} zIndex={props.zindex}></Mask>
            <div style={{
                display: "inline-block",
                ...style
            }}>
                <Button onClick={clickImportButton}>{props.children}</Button>
                <Input type="file" value={fileVal} onChange={importExcel} style={{ display: 'none' }} ref={importRef} />
            </div>
        </>
    )

}
export default UploadExcel;
